<template>
  <div class="content" style="padding: 0 20px;">
    <div class="demo-input-suffix">
      <div>
        <span>关键字查询：</span>
        <el-input class="indexInput" v-model="input" placeholder="请输入关键字"></el-input>
        <el-button class="indexButton" @click="keywordClick()" type="primary" icon="el-icon-search"></el-button>
      </div>
      <div>
        <el-button type="primary" class="primaryButton" @click="addFunc()" plain>
          <i class="el-icon-plus"></i>
          添加路段
        </el-button>
      </div>
    </div>
    <el-table
      :data="sectionLists"
      stripe
      style="width: 100%;">
      <el-table-column
        prop="name"
        label="路段名称">
      </el-table-column>
      <el-table-column
        prop="moName"
        label="所属管理处">
      </el-table-column>
      <el-table-column
        prop="upDirection"
        label="上行方向">
      </el-table-column>
      <el-table-column
        prop="downDirection"
        label="下行方向">
      </el-table-column>
      <el-table-column
        prop="upPileno"
        label="上行桩号范围">
      </el-table-column>
      <el-table-column
      prop="downPileno"
      label="下行桩号范围">
    </el-table-column>
      <el-table-column
        prop="createTime"
        label="添加时间">
      </el-table-column>
      <el-table-column
        prop="comment"
        label="备注">
      </el-table-column>
      <el-table-column
        prop=""
        label="操作">
        <template slot-scope="scope">
          <a class="reset" style="cursor: pointer;" @click="addFunc(scope.$index, scope.row)">添加</a>
          <i class="line"></i>
          <a class="reset" style="cursor: pointer;" @click="updateFunc(scope.$index, scope.row)">修改</a>
          <i class="line"></i>
          <a class="delete" style="cursor: pointer;" @click.stop="deleteFunc(scope.$index, scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="45%"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="路段名称" prop="sectionName">
              <el-input v-model="ruleForm.sectionName" placeholder="请输入路段名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属管理处" prop="Management">
              <el-input v-model="ruleForm.Management" placeholder="请输入所属管理处"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上行方向" prop="upDirection">
              <el-input v-model="ruleForm.upDirection" placeholder="请输入上行方向"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下行方向" prop="downDirection">
              <el-input v-model="ruleForm.downDirection" placeholder="请输入下行方向"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上行起始桩号" prop="upStartPileNo">
              <el-input v-model="ruleForm.upStartPileNo" placeholder="请输入上行起始桩号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上行结束桩号" prop="upEndPileNo">
              <el-input v-model="ruleForm.upEndPileNo" placeholder="请输入上行结束桩号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下行起始桩号" prop="downStartPileNo">
              <el-input v-model="ruleForm.downStartPileNo" placeholder="请输入下行起始桩号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下行结束桩号" prop="downEndPileNo">
              <el-input v-model="ruleForm.downEndPileNo" placeholder="请输入下行结束桩号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="comment">
              <el-input type="textarea" v-model="ruleForm.comment"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item>
              <el-button @click="cancel('ruleForm')">取 消</el-button>
              <el-button v-if="addOrUpdate == 1" type="primary" @click="addSave('ruleForm')">确 定</el-button>
              <el-button v-if="addOrUpdate == 2" type="primary" @click="updateSave('ruleForm')">确 定</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import sectionService from '../../../services/equipmentMode'
  export default {
    data() {
      return {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        input: '',
        sectionLists: [],
        addOrUpdate: 1,
        centerDialogVisible: false,
        addUpdateRadio: false,
        updateCode: '',
        title: '',
        ruleForm: {
          name: '',
          moName:'',
          comment: '',
          upDirection:'',
          downDirection:'',
          upPileno:'',
          downPileno:''
        },
        rules: {
          name: [
            {required: true, message: '请输入隧道名称', trigger: 'blur'},
          ],
          moName: [
            {required: true, message: '请输入所属管理处', trigger: 'blur'},
          ],
          upDirection: [
            {required: true, message: '请输入上行方向', trigger: 'blur'},
          ],
          downDirection: [
            {required: true, message: '请输入下行方向', trigger: 'blur'},
          ],
          moName: [
            {required: true, message: '请输入所属管理处', trigger: 'blur'},
          ],
          moName: [
            {required: true, message: '请输入所属管理处', trigger: 'blur'},
          ],
          comment: [
            {min: 0, max: 100, message: '长度在0 到 100 个字符', trigger: 'blur'}
          ]
        }
      };
    },
    mounted() {
      this.list()
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
        this.list()
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.list()
      },

      list() {
        let listDate = {
          // index: this.pageNo,
          // size: this.pageSize,
          // key: this.input,
        }
        sectionService.sectionListService(listDate).then(res => {
          if (res.code == 1) {
            this.sectionLists = res.data;
            this.total = res.total
          }
        })
      },
      //关键字查询
      keywordClick() {
        this.list()
      },
      //添加
      addFunc() {
        this.addOrUpdate = 1
        this.centerDialogVisible = true
        this.title = '路段信息添加'
        this.ruleForm = {
          name: '',
          moName:'',
          comment: '',
          upDirection:'',
          downDirection:'',
          upPileno:'',
          downPileno:''
        }
      },
      //添加保存
      addSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let addDate = {
                name: this.ruleForm.name,
                moName: this.ruleForm.moName,
                upDirection: this.ruleForm.upDirection,
                downDirection: this.ruleForm.downDirection,
                upPileno: this.ruleForm.upPileno,
                downPileno: this.ruleForm.downPileno,
                comment: this.ruleForm.comment,
              }
            sectionService.sectionAddService(addDate).then(res => {
              if (res.code == 1) {
                this.$message({
                  type: 'success',
                  message: '添加路段成功！'
                });
                this.list()
              } else {
                this.$message({
                  type: 'error',
                  message: '添加路段失败！'
                });
              }
              this.centerDialogVisible = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //取消
      cancel(formName) {
        this.centerDialogVisible = false
        this.$refs[formName].resetFields();
      },
      // 点击更新
      updateFunc(index, value) {
        this.addOrUpdate = 2
        this.centerDialogVisible = true
        this.title = '路段信息修改'
        this.updateCode = value.id
        let updataDate = {
          id: value.id
        }
        sectionService.sectionUpdateService(updataDate).then(res => {
          if (res.code == 1) {
           this.ruleForm.name = res.data.name;
           this.ruleForm.moId = res.data.moId
           this.ruleForm.upDirection = res.data.upDirection;
           this.ruleForm.downDirection = res.data.downDirection;
           this.ruleForm.upPileno = res.data.upPileno
           this.ruleForm.downPileno = res.data.downPileno
           this.ruleForm.comment = res.data.comment
            }
        })
      },
      // 更新保存
      updateSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let updateDate = {
                name: this.ruleForm.name,
                comment: this.ruleForm.comment,
              }
            sectionService.sectionUpdateSaveService(updateDate).then(res => {
              if (res.code == 1) {
                this.$message({
                  type: 'success',
                  message: '修改路段成功！'
                });
                this.list()
              } else {
                this.$message({
                  type: 'error',
                  message: '修改路段失败！'
                });
              }
              this.centerDialogVisible = false

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      //删除
      deleteFunc(index, value) {
        this.$confirm('此操作将删除该路段, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          let deleteDate = {
            ids: value.id
          }
          sectionService.sectionDeleteService(deleteDate).then(res => {
            if (res.code == 1) {
              this.list()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    }
  }
</script>
<style scoped lang="scss">
  /*@import '../public/homePage.css';*/
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .demo-ruleForm {
    height: 100%;
  }

  .el-dialog__body {
    padding: 0 20px !important;
  }

  .demo-input-suffix {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
  }

  .demo-input-suffix div {
    flex: 1;
  }

  .demo-input-suffix div:nth-child(2) {
    text-align: right;
  }

  .demo-input-suffix span {
    color: #666666;
    font-size: 14px;
  }

  .indexInput {
    width: 20%;
  }

  .indexButton {
    margin-left: 10px;
  }

  .content {
    background-color: #ffffff;
  }

  .reset {
    color: #1890FF;
  }

  .delete {
    color: #F5222D;
  }

  .line {
    display: inline-block;
    width: 1px;
    background: rgba(0, 0, 0, 0.09);
    margin: 0 11px;
    height: 14px;
  }

  .block {
    margin-top: 20px;
    text-align: center;
  }
</style>
